<template>
  <div>

    <div>
    	<h1 class="lg-title-sesion color-black-second">
    		<img src="../assets/image/logo.jpg" class="logo">
    		帝全网络管理平台
    	</h1>

    	<el-card class="box-card lg-card">
		  <div class="lg-card-title color-black-second">
		  	登录
		  </div>

		  <el-form ref="loginForm" :model="form" label-width="" class="lg-form">
			<el-form-item
			  label=""
			  prop="account"
			  :rules="[
			  	{ required: true, message: '请输入帐号', trigger: 'change' }
			  ]">
			  <el-input
			  	type="text"
			    size="large"
			    clearable
			    prefix-icon=""
			  	v-model="form.account"
			  	placeholder="帐号"
			  	@focus="inputFocusHandle">
			  	</el-input>
			</el-form-item>

			<el-form-item
			  label=""
			  prop="password"
			  :rules="[
			  	{ required: true, message: '请输入密码', trigger: 'change' }
			  ]">
			  <el-input
			  	type="password"
			  	size="large"
			  	clearable
			  	prefix-icon=""
			  	v-model="form.password"
			  	placeholder="密码"
			  	@focus="inputFocusHandle">
			  	</el-input>
			</el-form-item>

			<div class="app-diliver"></div>

			<el-form-item label="">
			  <el-button type="primary" round class="width-per100" @click="subLogin" :loading="loading">登录</el-button>
			</el-form-item>

			<div class="color-danger lg-result-tip" v-if="errorMsg != ''">{{errorMsg}}</div>
			<div class="color-success lg-result-tip" v-if="successMsg != ''">{{successMsg}}</div>

		  </el-form>

		</el-card>

    </div>

  </div>
</template>


<script>

  import Http from '../kit/HttpKit'
  import Api from '../api/Api'
  import UserApi from '../api/UserApi'

  import Md5Kit from '../kit/Md5Kit'

  import { mapMutations } from 'vuex'

  export default {
  	components: {

  	},
  	data(){
  	  return {
  	  	form: {
  	  	  account: '',
  	  	  password: '',
  	  	},

  	  	loading: false,

  	  	errorMsg: '',
  	  	successMsg: '',
  	  }
  	},
    created(){
      let f = this.$route.params.f;
      if (f == 'sto'){
        this.clearUser();
      }
    },
  	methods: {
  	  ...mapMutations([
      	'setUser', 'clearUser'
      ]),
  	  subLogin(){

  	  	this.$refs['loginForm'].validate(valid => {
          if (valid) {

            let startTime = new Date().getTime();
	        this.loading = true;

	        let data = {account: this.form.account, password: Md5Kit.encryptMd5(this.form.password)};
	        let url = UserApi.URL_LOGIN;

	        Http.post(url, data, json => {

	          let curTime = new Date().getTime();
	          if (curTime - startTime > 500) {
	            this.loading = false;

	            if (Api.isSuccess(json)) {
	            	this.successCB(json);
	            }else {
	            	this.failCB(json);
	            }

	          }else {
	            setTimeout(()=>{
	              this.loading = false;

	              if (Api.isSuccess(json)) {
	            	this.successCB(json);
		          }else {
		            this.failCB(json);
		          }

	            }, 500 - (curTime - startTime));
	          }

	        });

          }
        });
  	  },
  	  successCB(json){
  	  	this.successMsg = Api.getStatusMsg(json);

        setTimeout(()=>{

          let user = json.user;
          let apiToken = user.api_token;
          let apiUserId = user.api_user_id;
          let permList = json.permList;
		  let role = user.role;
		  let address = user.address;

			console.log("===================")
			console.log(user)
			console.log("===================")

			var index = user.userPhone.indexOf("1");
			var str = user.userPhone.substring(index)
			const userPhone = str;



          this.setUser({apiToken, apiUserId, permList,role,address,userPhone});

          let url = this.$route.query.redirect;
          if (url) {
          	this.$router.replace(url);
          }else {
          	this.$router.replace('/');
          }
        }, 500);
  	  },
  	  failCB(json){
  	  	this.errorMsg = Api.getStatusMsg(json);
  	  },
  	  inputFocusHandle(){
  	  	this.successMsg = '';
  	  	this.errorMsg = '';
  	  }
  	}
  }
</script>

<style>
  .lg-title-sesion{margin-left: 150px; font-size: 30px; font-weight: 400; position: relative; padding-left: 70px; line-height: 55px;}
  .lg-title-sesion .logo{position: absolute; left: 0; top: 0; width: 55px; height: 55px; border-radius: 50%;}

  .lg-card{width: 400px; margin: 120px auto; padding: 40px 40px 20px 40px;}
  .lg-card .lg-card-title{font-size: 24px; font-weight: 400; text-align: center; padding: 0 0 30px 0;}

  .lg-form input{height: 44px; line-height: 44px; font-size: 15px;}
  .lg-form button{height: 44px; border-radius: 22px; font-size: 15px;}

  .lg-result-tip{margin: 20px 0 0 0;}
</style>
